﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/before/js/echarts.min.js"></script>
 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.zaixianke.com/china.js"></script>
    <script src="../static/before/js/jquery.min.js"></script>
    <title>游客数据分析</title>
    <link rel="stylesheet" href="../static/before/css/wodry.css">
    <link rel="stylesheet" href="../static/before/css/test2.css">
    <link rel="stylesheet" href="../static/before/css/public.css">

    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>

<div class="main">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                游客数据分析
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>

    </div>

    <div class="center">
        <div class="center-left fl">
            <div class="left-top rightTop border">
                <div class="title">基本信息</div>
                <div class="top-list">
                    <p>一辈子就是一场修行，短的是旅程，长的是人生</p>
                    <ul>
                        <li>贵州省5A景区：7个</li>
                        <li>国家自然保护区：9个</li>
                        <li>热门景点：黄果树瀑布</li>
                        <li>最热门的特产：茅台酒</li>
                        <li>热门美食小吃：丝娃娃</li>
                        <li>最火支付方式：微信</li>
                        <li>最火小吃街：二七路小吃街</li>
                    </ul>
                </div>
            </div>
            <div class="left-cen rightTop border">
                <div class="title">游客购票方式</div>
                <div class="bottom-b">
                    <div id="ceshi" style="width: 330px; height: 200px;"></div>
                </div>
            </div>
            <div class="left-bottom rightTop border">
                <div class="title">景区游客评分</div>
                <div id="canPer" style="width: 330px; height: 200px;"></div>
            </div>
        </div>
        <div class="center-cen fl">
             <div class="cen-top rightTop border">
                <div id="zgang" style="width: 720px; height: 500px;"></div>
            </div>

            <div class="cen-bottom rightTop border">
                 <div id="payNum2" style="width: 750px; height: 250px;"></div>

            </div>


        </div>
        <div class="center-right fr">
            <div class="right-top rightTop border">
               <div class="title">景区线上售票热度表</div>
                <div class="echart wenzi">
                                    <div class="gun">
                                    <span>排名</span>
                                    <span>景区名称</span>
                                    <span>热度</span>
                                </div>
                                    <div id="FontScroll" class="myscroll">
                                         <ul>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>1</b>
                                                    </span>
                                                    <span>黄果树瀑布</span>
                                                    <span>热度8.8</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>2</b>
                                                    </span>
                                                    <span>西江千户苗寨</span>
                                                    <span>热度8.8</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>3</b>
                                                    </span>
                                                    <span>荔波小七孔</span>
                                                    <span>热度8.6</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>4</b>
                                                    </span>
                                                    <span>梵净山</span>
                                                    <span>热度8.5</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>5</b>
                                                    </span>
                                                    <span>青岩古镇</span>
                                                    <span>热度8.2</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>6</b>
                                                    </span>
                                                    <span>黔灵山公园</span>
                                                    <span>热度7.7</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>7</b>
                                                    </span>
                                                    <span>织金洞</span>
                                                    <span>热度7.4</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>8</b>
                                                    </span>
                                                    <span>万峰林</span>
                                                    <span>热度7.4</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>9</b>
                                                    </span>
                                                    <span>中国天眼基地</span>
                                                    <span>热度7.4</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>10</b>
                                                    </span>
                                                    <span>龙宫</span>
                                                    <span>热度7.3</span>

                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>11</b>
                                                    </span>
                                                    <span>镇远古城</span>
                                                    <span>热度7.3</span>

                                                </div>
                                            </li>
                                             <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>12</b>
                                                    </span>
                                                    <span>赤水丹霞</span>
                                                    <span>热度7.0</span>

                                                </div>
                                            </li>
                                             <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>13</b>
                                                    </span>
                                                    <span>甲绣楼</span>
                                                    <span>热度7.4</span>

                                                </div>
                                            </li>
                                             <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>14</b>
                                                    </span>
                                                    <span>肇兴桐寨</span>
                                                    <span>热度7.6</span>

                                                </div>
                                            </li>

                                        </ul>

                                    </div>
                                </div>

            </div>
            <div class="right-cen border">
                <div class="title">游客评论情况</div>
                <div class="bottom-b">
                    <div id="zaihe" style="width: 350px; height: 210px;"></div>
                </div>

            </div>
            <div class="right-bottom rightTop border">
                <div class="title">近五年贵州省国庆黄金周旅游人数</div>
                <div class="bottom-b">
                    <div id="canting" style="width: 340px; height: 230px;"></div>
                </div>

            </div>
        </div>
    </div>


</div>



<script>
var chartDom = document.getElementById('payNum2');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
          legend: {
              orient: 'horizontal',
        left: 'center',
        textStyle: {
            fontSize: 12,//字体大小
            color: '#ffffff'//字体颜色
        },
          },
          tooltip: {},
          dataset: {
            dimensions: ['product', '景区', '酒店', '旅行社'],
            source: [
              { product: '贵阳市', 景区: 41, 酒店: 47, 旅行社: 395 },
              { product: '安顺市', 景区: 50, 酒店: 14, 旅行社: 37 },
              { product: '遵义市', 景区: 129, 酒店: 32, 旅行社: 92 },
              { product: '铜仁市', 景区: 29, 酒店: 25, 旅行社: 26 },
              { product: '六盘水市', 景区: 54, 酒店: 15, 旅行社: 29 },
              { product: '毕节市', 景区: 55, 酒店: 14, 旅行社: 19 },
              { product: '黔东南州', 景区: 91, 酒店: 48, 旅行社: 43 },
              { product: '黔西南州', 景区: 48, 酒店: 13, 旅行社: 23 },
              { product: '黔南州', 景区: 73, 酒店: 38, 旅行社: 32 },
            ]
          },
          xAxis: {
              type: 'category',
              axisLine:{
                  lineStyle:{
                  color:'#ffffff',
            },
        }
          },
          yAxis: {
              axisLine:{
            lineStyle:{
                color:'#FFFAFA',
            },
        },
          },
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };

    myChart.setOption(option);
</script>

<script>
    var chartDom = document.getElementById('canPer');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
            orient: 'horizontal',
            left: 'center',
            textStyle: {
                fontSize: 12,//字体大小
                color: '#ffffff'//字体颜色
            },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
         axisLine:{
            lineStyle:{
                color:'#FFFAFA',
            },
        },
      },
      yAxis: {
        type: 'category',
        data: ['5分', '4分', '3分', '2分', '1分'],
         axisLine:{
            lineStyle:{
                color:'#FFFAFA',
            },
        },
      },
      series: [
        {
          name: '用户评分',
          type: 'bar',
          data: [21060, 5371, 1630, 118, 214],
          color:"#aa22ff"
        },
      ]
    };

option && myChart.setOption(option);
</script>

<script>
    var chartDom = document.getElementById('zaihe');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        textStyle: {
            fontSize: 12,//字体大小
            color: '#ffffff'//字体颜色
        },
      },
      series: [
        {
          name: '评论比例',
          type: 'pie',
          radius: '60%',
          label : {
        　　　　normal : {
        　　　　　　formatter: '{b}:({d}%)',
        　　　　　　textStyle : {
        　　　　　　　　fontWeight : 'normal',
        　　　　　　　　fontSize : 12,
        　　　　　　}
        　　　　}
        　　},
          data: [
            { value: 20880, name: '积极' },
            { value: 3197, name: '中立' },
            { value: 4060, name: '消极' },
          ],
          color: ["#FEE449", "#0000ff", "#00FFA8"],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(255, 255, 0, 0.5)'
            }
          }
        }
      ]
    };

option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('canting');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {  //这里设置提示框
                trigger: 'item',  //数据项图形触发
                backgroundColor: "blue",  //提示框浮层的背景颜色。
          },
      xAxis: {
        name:'年份',
        type: 'category',
        data: ['2017', '2018', '2019', '2020', '2021'],
        axisLine:{
            lineStyle:{
                color:'#ffffff'
            },
        }
      },
      yAxis: {
         name:'万人',
        type: 'value',
        axisLine:{
            lineStyle:{
                color:'#ffffff'
            },
        }
      },
      series: [
        {
          data: [4614.54, 4934.1, 2855.77, 5190.69, 4708],
          type: 'line',
          // 设置折线上圆点大小
            symbolSize:4,
            itemStyle:{
              normal:{
                // 拐点上显示数值
                label : {
                show: true
                },
                borderColor:'red',  // 拐点边框颜色
                lineStyle:{
                  width:3,  // 设置线宽
                  type:'solid'  //'dotted'虚线 'solid'实线
                },
              },
            } ,
        },
      ]
    };

    myChart.setOption(option);
</script>



<script src="../static/before/js/jquery.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../static/before/js/test2.js"></script>
<script src="../static/before/js/wodry.min.js"></script>
<script src="../static/before/js/fontscroll.js"></script>
<script src="../static/before/js/echarts.min.js"></script>
<script src="../static/before/js/china.js"></script>
<script src="../static/before/js1/echarts.js"></script>
<script src="../static/before/js1/echarts-wordcloud.min.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
 var chartDom = document.getElementById('ceshi');
    var myChart = echarts.init(chartDom);
    var option;
     option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
      },
      series: [
        {
          name: '游客购票方式',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
            normal : {
        　　　　　　formatter: '{b}:({d}%)',
        　　　　　　textStyle : {
        　　　　　　　　fontWeight : 'normal',
        　　　　　　　　fontSize : 12,
        　　　　　　}
        　　　　}
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 300, name: '线下' },
            { value: 735, name: '携程' },
            { value: 580, name: '去哪儿' },
            { value: 484, name: '驴妈妈' },
            { value: 300, name: '穷游网' },
          ],
             color:["#FEE449","#0ff","#ff4898","#F76F01","#9F17FF","#222"],
        }
      ]
    };
         // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart.currentIndex = -1;
    //myChart.setOption(option);
    //console.log(option.series[0].data[0]);
    setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: myChart.currentIndex
        });
        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: myChart.currentIndex
        });
    }, 1000);

    window.addEventListener("resize",function(){
        myChart.resize();
    });

option && myChart.setOption(option);

    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;

        nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum    = '0'+str;
        }else{
            realNum    = str;
        }
        return realNum;
    }
    setInterval(getTime,1000);

</script>

</body>
</html>